<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>饼图</title>
    <script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../jtopo-0.4.8-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var canvas = document.getElementById('canvas');
        var stage = new JTopo.Stage(canvas);
        // showJTopoToobar(stage);

        var scene = new JTopo.Scene();
        scene.background = 'img/bg.jpg';

        var node = new JTopo.PieChartNode();
        // node.shadow = false;//阴影
        node.radius = 100;
        node.colors = ['#3666b0', "#2CA8E0", "#77D1F6"];
        node.datas = [0.3, 0.3, 0.4];
        node.titles = ['A', 'B', 'C'];

        node.setLocation(300, 203);
        scene.add(node);
        stage.add(scene);

        function f(n) {
            if (n > 20) return;
            node.datas[1] += 0.01;
            node.datas[2] -= 0.01;

            setTimeout(function() {
                f(n + 1);
            }, 100);
        }
        f(0);


    })
    </script>
</head>

<body>
    <canvas id="canvas" width="800px" height="500px" style=""></canvas>
</body>

</html>